<template>
  <div class="toolbar">
    <div class="toolbar-son">
        <img src="../assets/toolbar/Contacts.png" alt="">
		<img @click="openCalculator()" src="../assets/toolbar/Calculator.png" alt="计算器">
		<img src="../assets/toolbar/Clock.png" alt="">
		<img src="../assets/toolbar/smsmms.png" alt="">
		<img src="../assets/toolbar/com_android_chrome_icon.png" alt="">
		<img src="../assets/toolbar/com_dataviz_docstogo_icon.png" alt="">
		<img src="../assets/toolbar/com_autonavi_minimap_icon.png" alt="">
		<img src="../assets/toolbar/note.png" alt="">
		<img src="../assets/toolbar/com_sina_weibo_icon.png" alt="">
		<img src="../assets/toolbar/com_xinmei365_font_icon.png" alt="">
		<img src="../assets/toolbar/com_google_android_googlequicksearchbox_icon.png" alt="">
		<img src="../assets/toolbar/play.png" alt="">
		<img src="../assets/toolbar/com_weather_Weather_icon.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
	data(){
		return{
			isOpenCalculator:false
		}
	},
	methods:{
		openCalculator(){
			this.isOpenCalculator = !this.isOpenCalculator
			this.$emit("openCalculator",this.isOpenCalculator)
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped>
.toolbar {
  width: 100%;

  /* filter: blur(2px); */
}

.toolbar-son {
	height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	
}
.toolbar-son img{
		margin: 0 0.5%;
		width: 2.5%;
		transition: width 0.3s;
}
.toolbar-son img:hover{
	width: 4%;
}
</style>
